<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 520px;
            height: 280px;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }

        .imgContainer {
            position: absolute;
            width: 1560px;
            height: 280px;
            left: -520px;
        }

        .imgContainer img {
            float: left;
        }
        .right {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            right: 5px;
        }
        .left {
            position: absolute;
            z-index: 10;
            font-size: 33px;
            font-weight: 900;
            color: #fff;
            text-shadow: 1px 1px red,-1px 1px red,-1px -1px red,1px -1px red;
            top: 50%;
            transform: translateY(-50%);
            left: 5px;
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- <div>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
            <p></p>
        </div> -->
        <div class="right">&gt;</div>
        <div class="left">&lt;</div>
        <div class="imgContainer">
        </div>
    </div>
    <script>
        var objArr = [
            {
                page:1,
                src:'./images/1t.png'
            },{
                page:2,
                src:'./images/2t.png'
            },{
                page:3,
                src:'./images/3t.png'
            }
            // ,{
            //     page:4,
            //     src:'./images/4t.png'
            // },{
            //     page:5,
            //     src:'./images/5t.png'
            // }
        ];
        var numArr = [objArr.length , 1 , 2];
        function getImg( arr ){
            var imgArr = arr.map(function ( item ){
                for( var i = 0 ; i < objArr.length ; i ++ ){
                    if ( item == objArr[i].page ){
                        return objArr[i] ;
                    }
                }
            });
            return imgArr ; 
        }

        renderDom();
        autoPlay ();

        function renderDom(){
            var imgContainer = document.querySelector(".imgContainer");
            console.log(imgContainer);
            imgContainer.innerHTML = '' ;
            var imgArr = getImg( numArr ) ; 
            imgArr.forEach(function( obj , key ){
                var img = document.createElement("img");
                img.src = obj.src;
                imgContainer.appendChild(img);
            });
        }
        
        var imgContainer = document.querySelector(".imgContainer");
        function autoPlay (){
            var imgContainer = document.querySelector(".imgContainer");
            var target = -520 ; 
            var timer = setInterval(function(){
                if ( target == -1040 ){
                    target = -520 ;
                    imgContainer.style.left = `${target}px`
                    renderDom();
                }
                target = target - 520 ; 
                numArr = numArr.map(function( item ){
                    return  item % objArr.length + 1 ;
                });
                changePage( timer , target );
            },2000);
        }
        function changePage( timer ){
            var prePage = document.querySelector(".left");
            var nextPage = document.querySelector(".right");
            var imgContainerEle = document.querySelector(".imgContainer");
            var containerEle = document.querySelector(".container");
            imgContainerEle.onmouseenter = function (){
                clearTimeout(timer);
                prePage.onclick = function (){
                    numArr = numArr.map(function( item ){
                        if( item == 1 ){
                            return item * objArr.length ;
                        } else {
                            return item - 1 ;
                        }
                    });
                    renderDom();
                }
                nextPage.onclick = function (){
                    numArr = numArr.map(function( item ){
                        return  item % objArr.length + 1 ;
                    });
                    renderDom();
                }
            }
            containerEle.onmouseleave = function (){
                autoPlay();
            }
        }
    </script>
</body>

</html>